<template>
	<view>
		<view class="claim-img">
			<img src="@/static/index/youhuiquan.png" alt="" style="width: 100%;height: 100%;" />
		</view>
		<view class="claim-select" @click="couponsShowBtn">
			 <view class="">
			 	 {{couponsSelect}}
			 </view>
			 <view class="">
			 	<u-icon name="arrow-down-fill" ></u-icon>
			 </view>
		</view>
		<u-select v-model="couponsShow" :list="couponsList" @confirm="confirm"></u-select>
		<view  v-for="(item,index) in couponDataList" :key="index">
			<view  class="coupon-container">
				<view class="c-left">
					<view class="" v-if="item.type == 0">
						<view class="cl-top" >￥{{item.cashAmount}} </view>
						<view class="cl-way">代金券</view>
					</view>
					<view class="" v-if="item.type == 1">
						<view class="cl-top">{{item.discountRate}} <text style="font-size: 24rpx; font-weight: 300;">折</text> </view>
					    <view class="cl-way">折扣券</view>
					</view>
					<view class="" v-if="item.type == 2">
						<view class="cl-top" v-if="item.type == 2">{{item.hourNumber}} <text style="font-size: 24rpx; font-weight: 300;">课时</text> </view>
					    <view class="cl-way">课时券</view>
					</view>
				</view>
				<view class="c-center">
					
				</view>
				<view class="c-right">
					<view class="cr-name">{{item.name}}</view>
					<view class="cr-code">有效期：{{item.useStopTime}}</view>
					<view class="cr-bottom">
						<view class="cr-know" @click="knowShowBtn(item)">报名须知<u-icon name="arrow-right"></u-icon></view>
						<view class="rb-img" @click="panicBuyBtn(item)">
							<img src="@/static/index/qiang.png" alt=""  style="width: 100%;height: 100%;"/>
						</view>
					</view>
					
				</view>
			</view>
		</view>
		<view class="bottom-tabbar">
			<view class="tab-one" @click="goBackHome">
				<view class="tab-img"><u-icon name="home"></u-icon></view>
				<view class="tab-name">主页</view>
			</view>
			<view class="tab-one" @click="telShowBtn">
				<view class="tab-img"><u-icon name="phone"></u-icon></view>
				<view class="tab-name">咨询</view>
			</view>
		
			<view class="tab-three" style="background-color: #c90d36;" @click="myCoupon">
				我的优惠券
			</view>
		</view>	
		<telPage></telPage>
	
				<noticeComp :knowShow="knowShow" :info="info" @knowShowFalse="knowShowFalse" v-if="knowShow"></noticeComp>
	
	</view>
</template>

<script>
	import telPage from '@/components/telPage.vue';
	import noticeComp from '@/components/noticeComp.vue';
	
	import {getEventsCoupon,drawCouponSchoolOn} from '@/utils/api.js'
	export default {
		components: {
			noticeComp,
			telPage
		},
		data() {
			return {
				couponsShow: false,
				couponsList: [{
					value: '',
					label: '全部'
				}, {
					value: '0',
					label: '代金券'
				}, {
					value: '1',
					label: '折扣券'
				}, {
					value: '2',
					label: '课时券'
				}, ],
				couponsSelect: "全部",
				couponsSelectId: '',
				knowShow:false,
				info:{},
				couponDataList:[1,2,3]
			}
		},
		onLoad() {
			this.getEventsCoupon()
		},
		methods: {
			async getEventsCoupon() {
				uni.showLoading()
				const data = {
					type:this.couponsSelectId
				}
				const res = await getEventsCoupon(data)
				if(res.code === 200){
					uni.hideLoading()
					this.couponDataList = res.rows
				}
			},
			confirm(e) {
				console.log("e", e);
				this.couponsSelect = e[0].label
				this.couponsSelectId = e[0].value
				this.getEventsCoupon()
			},
			couponsShowBtn(){
				this.couponsShow = true
			},
			knowShowBtn(item){
				this.info = item	
				this.knowShow = true
				
				console.log(this.info,"111");
			},
			knowShowFalse(value){
				this.knowShow = value
			},
			myCoupon(){
				uni.navigateTo({
					url:'/pages/my/coupon'
				})
			},
			goBackHome(){
				uni.redirectTo({
					url:'/pages/index/index'
				})
			},
			telShowBtn(){
				uni.$emit("telShow",true)
				// console.log("1",telShow);
			},
		async panicBuyBtn(item){
				if(!uni.getStorageSync('trainneInfo')){
						const params = {
							eventsCouponId:item.id,		
						}
						const {
							data,
							code
						} = await drawCouponSchoolOn(params)
						if (code === 200) {
							uni.showToast({
								title: `抢购成功`,
								icon: 'none',
								duration: 2000
							});
						}
				}else{
					uni.navigateTo({
					  // url: './applicateOnlineQuestion?item=' +JSON.stringify(item) ,
					  url:'./rushCoupons?item=' +JSON.stringify(item) ,
					})
				}
			}
		}
	}
</script>
<style>
	page {
		background-color: #d70000;
	}
</style>
<style>
	.claim-img {
		width: 100vw;
		height: 40vh;
	}

	.claim-select {
		width: 93%;
		height: 80rpx;
		margin: 0 auto;
		padding: 20rpx;
		border: 2rpx solid #fff;
		background-color: #ee7272;
		color: #fff;
		display: flex;
		justify-content: space-between;
	}
	.coupon-container{
		width: 95%;
		margin: 20rpx auto;
		background-color: #ffffff;
		border-radius: 8rpx;
		display: flex;
	
	}
	.c-left{
		width: 200rpx;
		text-align: center;
	
	margin-top: 30rpx;
		
	}
	.cl-top{
		color: #ff3939;
		font-size: 40rpx;
		font-weight: bold;
		
	}
	.cl-way{
		font-size: 24rpx;
		color: #a9a9a9;
		margin-top: 25rpx;
	}
	.c-center{
		// border-left: 2rpx so;
		height: 100rpx;
		width: 20rpx;
		// background-color: #1631a9;
	  
	}
	.c-right{
		margin: 20rpx ;
		width: 75%;
	}
	.cr-name{
		font-weight: bold;
	}
	.cr-code{
		color: #8e8c8c;
		margin-top: 10rpx;
	}
	.cr-know{
		color: #418ada;
		margin-top: 10rpx;
	}
	.coupon-tip{
		font-weight: bold;
		margin-top: 20rpx;
	}
	.tel-style{
		margin-top: 20rpx;
	}
	.cr-bottom{
		display: flex;
		justify-content: space-between;
	}
	.rb-img{
		width: 150rpx;
		height: 50rpx;
	}
	.bottom-tabbar {
		position: fixed;
		bottom: 0;
		width: 100%;
		height: 100rpx;
		background-color: #ffffff;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 30rpx;
	}
	
	.tab-one {
		width: 90rpx;
		text-align: center;
	}
	
	.tab-name {
		margin-top: 8rpx;
	}
	
	.tab-three {
		width: 400rpx;
		height: 70rpx;
		text-align: center;
		line-height: 70rpx;
		color: #ffffff;
		border-radius: 100rpx;
	
	}
</style>